<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        #box{
            width: 400px;
            height: 300px;
            padding: 30px;
            border: 1px solid #999;
        }
    </style>
</head>
<body>
    <h1>HTMLElement对象</h1>
    <hr>

    <div id="box">
        <h3>好诗</h3>
        <p>
            小荷才露尖尖角
            <img src="./imgs/Meinv018.jpg" width="200">
        </p>
        123456
        <div style="width:1000px;height:1000px"></div>
    </div>

    <script>
        // console.log('offsetWidth:' + box.offsetWidth);
        // console.log('offsetHeight:' + box.offsetHeight);

        // console.log('clientWidth:' + box.clientWidth);
        // console.log('clientHeight:' + box.clientHeight);

        // console.log('scrollWidth:' + box.scrollWidth);
        // console.log('scrollHeight:' + box.scrollHeight);

        // // innerHTML   元素内部的内容(不含标签)
        // console.log(box.innerHTML);
        // // innerText   元素内部所有的文本内容
        // console.log(box.innerText);
        // // outerHTML   元素的内容(含标签)
        // console.log(box.outerHTML);

        window.onresize = function () {
            console.log('视口高度: ' + document.documentElement.clientHeight + ' | 文档高度: '+ document.documentElement.scrollHeight);
        }

    </script>
</body>
</html>